<template>
  <view class="lottery-container">
	 <!-- <view class="video" >
	    <video
	      class="video-view"
	      id="myVideo"
	      :controls="false"
	      autoplay
	      :src="mp4_"
	      muted
	      object-fit="fill"
	    ></video> -->
	  
	  
    <!-- 开场动画  open :class="sequential.opening ? 'show' : 'hide'"    v-if="show"   -->
    <view class="animation-summon" v-if="show">
      <view class="video" v-if="mp4_ && sequential.meteor_">
        <video
          class="video-view"
          id="myVideo"
          :controls="false"
          autoplay
		  :show-center-play-btn="false"
          :src="mp4_"
          muted
          object-fit="fill"
        ></video>
      </view>
    </view>
    <!-- 射灯 -->
    <view
      class="animation-summon light"
      :class="sequential.spotlight ? 'show' : 'hide'"
      v-if="show"
    >
      <light></light>
    </view>

    <!-- 最后展示 -->
    <view class="result-end" v-if="sequential.appearances && show">
		
      <swiper vertical
        class="swiper-group"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
        @change="onChange"
        :duration="duration"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in compartmentals"
          :key="index"
        >
          <view
            class="card-list"
            
            :class="item.length == 1 ? 'single' : ''"
          >
		  
            <lottery-card
			@animationend="animationEnded($event,k0,ikey)"
              class="card-item"
              :class="skip ? 'skip' : 'show'"
              v-for="(ikey, k0) in item"
              :mkey="k0"
              :key="k0"
              :number="index"
              :type="ikey.level"
              :details="ikey"
			  :issel="issel"
			  @tabsel="tabsel"
            ></lottery-card>
			
			
          </view>
        </swiper-item>
      </swiper>
      <!--  -->
      <view class="indicator" v-if="compartmentals.length > 1">
        {{ swiperCurrent + 1 }} / {{ compartmentals.length }}
      </view>
	  
	 
    </view>
    <view class="bottom-btn">
		<view
		  class="again-btn"
		  hover-class="hover-bubble"
		  @tap.stop="tuifei"
		  v-if="show && sequential.spotlight&&isfee!='免一发'&&yue!='yue'"
		>
		  <image class="bg-again" :src="one_img" mode="widthFix" />
		  <view class="text" style="display:flex;flex-direction: column;"> {{texttui}}
		  </view>
		</view>
		    
      <view
        class="again-btn"
        hover-class="hover-bubble"
        @tap.stop="close"
        v-if="show && sequential.spotlight"
      >
        <image class="bg-again" :src="again_img" mode="widthFix" />
        <view class="text"> 开心收下 </view>
      </view>
	  
	 
	
	  
     <!-- <view
          class="again-btn"
          hover-class="hover-bubble"
          @tap="onClickOperate($event, 'again', {})"
          ><image class="bg-again" :src="again_img" mode="widthFix" />
          <view class="text"> 继续欧气 </view>
        </view> -->

      <view
        class="skip-btn"
        hover-class="hover-bubble"
        @tap.stop="clickSkip"
        v-if="!skip"
      >
        <u-icon size="25" class="icon-skip" name="skip-forward-right"></u-icon>
        跳过动画
      </view>
    </view>
  </view>
</template>
<script>
import LotteryCard from './lottery-card.vue';
import Light from './light.vue';

import again_img from '../img/all-1.png';
import one_img from '../img/one-0.png';

import tools from '@/shopro/utils/tools';
// import Shuttle from './shuttle.vue';
// import Particle from './particle.vue';
const _delay = tools.delayDither(50);
import { mapGetters } from 'vuex';
// import { TEST_YFS_DATA_RESULT } from '../portrait/portait_config';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { LotteryCard, Light /* Shuttle, Particle */ },
  props: {
	  yue:{
		  type: String,
		  default: '',
	  },
  isfee:{
	  type: String,
	  default: '',
  },
    show: {
      type: Boolean,
      default: false,
    },
	isindex:{
		type:Boolean,
		default: false,
	},
    resultList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return { 
		aainde:"",
		innerAudioContext0:"",
		innerAudioContext1:"",
		innerAudioContext2:"",
		innerAudioContext3:"",
		innerAudioContext4:"",
		innerAudioContext5:"",
		innerAudioContext6:"",
		innerAudioContext7:"",
		innerAudioContext8:"",
		innerAudioContext9:"",
		innerAudioContext11:"",
		texttui:"退费",
      // testdata: TEST_YFS_DATA_RESULT,
	  issel:false,
      mp4_: '',
      again_img,
		one_img,
      swiperCurrent: 0,

      timestamp: '?',

      duration: 400,

      //播放顺序
      sequential: {
        // 开幕
        // opening: false,
        // 星星
        meteor_: false,
        // 出场
        appearances: false,

        // 聚光灯
        spotlight: false,
        // 翻牌
        flop: false,
      },
      timer: {
        // 开幕
        // opening: null,
        // 星星
        meteor_: null,
        // 出场
        appearances: null,

        // 聚光灯
        spotlight: null,
        // 翻牌
        flop: null,
      },
      // 是否跳过动画
      isSkip: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    ...mapGetters(['allSkip']),
    skip() {
      return this.allSkip || this.isSkip || false;
    },

    list() {
		 
      return this.resultList;
      // return this.testdata;
    },

    compartmentals() {
		
      if (this.list.length <= 10) {
		 
        return [this.list];
      } else {
		  
		  
		 var page  = Math.ceil(this.list.length/10)
		 
		  var  aend = [];
		  for(var i = 1 ; i<page+1;i++){
			  aend.push(this.paginateArray(this.list,i,10))
		  }
		  
		  return aend
		  
		  
		  
		  
		  
  //       let excess = this.list.length % 10;
  //       let stage = (this.list.length - excess) / 10;
  //       excess > 0 ? stage + 1 : '';
		
		// console.log(stage,"jjjj")
		// console.log(excess,"pppp")
		// console.log(this.list,"jhhh")
		
  //       let end = [];
  //       for (let i = 0; i < 2; i++) {
		// 	console.log('end')
  //         if (i == stage - 1 && excess > 0) {
		// 	  console.log("ttttttt")
  //           end.push(this.list.slice(i * 10, i * 10 + excess));
  //         } else {
		// 	  console.log("gggggggg")
  //           end.push(this.list.slice(i * 10, (i + 1) * 10));
  //         }
  //       }
		
		// console.log('hhhh',end)
  //       return end;
      }
	  
    },
  },
  // 数据监听
  watch: {
	  isindex(val){
		  this.aainde = 0
	  },
    show(val) {
      if (val) {
        this.hideing();
        uni.showLoading({
          title: '正在加载',
          mask: true,
        });
        let show_timer = setTimeout(() => {
          clearTimeout(show_timer);
          uni.hideLoading();
          this.onSkip({
            success: () => {
              this.play();
            },
            fail: () => {},
          });
        }, 200);
      } else {
        this.hideing();
      }
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {
	  
    this.timestamp = `?${Math.random() * 100}`;
    this.loadingAnimation();
	this.innerAudioContext1 = uni.createInnerAudioContext();
	this.innerAudioContext1.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	
	this.innerAudioContext2 = uni.createInnerAudioContext();
	this.innerAudioContext2.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext3 = uni.createInnerAudioContext();
	this.innerAudioContext3.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext4 = uni.createInnerAudioContext();
	this.innerAudioContext4.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext5 = uni.createInnerAudioContext();
	this.innerAudioContext5.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext6 = uni.createInnerAudioContext();
	this.innerAudioContext6.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext7 = uni.createInnerAudioContext();
	this.innerAudioContext7.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext8 = uni.createInnerAudioContext();
	this.innerAudioContext8.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext9 = uni.createInnerAudioContext();
	this.innerAudioContext9.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext0 = uni.createInnerAudioContext();
	this.innerAudioContext0.src = 'https://file.aitewan.com/uploads/20241028/5e58bf1687dd82f87b511ed7c1c595aa.mp3'
	
	this.innerAudioContext11 = uni.createInnerAudioContext();
	this.innerAudioContext11.src = 'https://file.aitewan.com/uploads/20241028/4581517c8d3aa44a02674c8af43f7ec5.mp3';
	
	
  },
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
	  
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
	  
	  animationEnded(e,index,item){
		  if(this.$store.state.shopro.sound){
		  if(e.elapsedTime == 1.3){
			  this.aainde++
			  if(this.aainde > 10){
				  return
			  }
			  if(index == 0){
				  this.innerAudioContext0.play()
			  }else if(index == 1){
				  this.innerAudioContext1.play()
			  }else if(index == 2){
				  this.innerAudioContext2.play()
			  }else if(index == 3){
				  this.innerAudioContext3.play()
			  }else if(index == 4){
				  this.innerAudioContext4.play()
			  }else if(index == 5){
				  this.innerAudioContext5.play()
			  }else if(index == 6){
				  this.innerAudioContext6.play()
			  }else if(index == 7){
				  this.innerAudioContext7.play()
			  }else if(index == 8){
				  this.innerAudioContext8.play()
			  }else if(index == 9){
				  this.innerAudioContext9.play()
			  }
			   if(item.level == 7){
			  		this.innerAudioContext11.play()
			  }
		  }
		  }
	  },
	   paginateArray(array, pageNumber, pageSize) {
		
	    let start = (pageNumber - 1) * pageSize;
	    let end = start + pageSize;
	    return array.slice(start, end);
	  },
	  tabsel(index,id){
		  // id.isdisabled = true
		  this.$emit('tabsel',index,id)
	  },
	  tuifei(){
		  if(this.issel){
			  
			  this.$emit('jishou')
			  
		  }else{
			  this.texttui = '确定退费'
			  this.issel = !this.issel
		  }
		  
	  },
    // 点击 跳过
    clickSkip() {
      this.isSkip = true;
      this.hideing();
      this.onSkip();
    },

    // 跳过
    onSkip(ev = {}) {
      let { success = () => {}, fail = () => {} } = ev;
      if (this.skip) {
        this.sequential.appearances = true;
        this.sequential.spotlight = true;
        fail();
      } else {
        success();
      }
    },

    hideing() {
      //播放顺序
      this.sequential = {
        // 开幕
        // opening: false,
        // 星星
        meteor_: false,
        // 出场
        appearances: false,

        // 聚光灯
        spotlight: false,
        // 翻牌
        flop: false,
      };
      Object.keys(this.timer).forEach((item) => {
        const ele = this.timer[item];
        if (ele) {
          clearTimeout(ele);
        }
      });
    },
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        this.$emit('again', { name, type: true });
      });
    },

    close() {
      this.isSkip = false;
      if (!this.sequential.spotlight) return;
      this.$emit('close', { name: 'close', type: true });
    },

    transition() {},

    animationfinish(e) {
      let current = e.detail.current;
      this.swiperCurrent = current;
    },

    onChange() {},

    // 播放事件
    sequentialEvent() {
      let openEnd = 2900,
        meteor_End = 3300;
      return {
        // //开场
        // opening: (fn = () => {}, delay = openEnd) => {
        //   this.sequential.opening = true;
        //   this.timer.opening = setTimeout(() => {
        //   clearTimeout(this.timer.opening)
        //     fn();
        //     this.sequential.opening = false;
        //   }, delay);
        // },
        //星星出场
        meteor_: (fn = () => {}, delay = meteor_End) => {
          this.sequential.meteor_ = true;
          this.timer.meteor_ = setTimeout(() => {
            clearTimeout(this.timer.meteor_);
            fn();
            this.sequential.meteor_ = false;
          }, delay);
        },
        //出场
        appearances: (fn = () => {}, delay = meteor_End - 1200) => {
          this.timer.appearances = setTimeout(() => {
            clearTimeout(this.timer.appearances);
            fn();
            this.sequential.appearances = true;
          }, delay);
        },
        //聚光灯
        spotlight: (fn = () => {}, delay = meteor_End - 900) => {
          this.timer.spotlight = setTimeout(() => {
            clearTimeout(this.timer.spotlight);
            fn();
            this.sequential.spotlight = true;
          }, delay);
        },
        // // 翻牌
        flop: (fn = () => {}, delay = openEnd + meteor_End + 1000) => {
          this.timer.flop = setTimeout(() => {
            clearTimeout(this.timer.flop);
            fn();
            this.sequential.flop = true;
            this.isSkip = true;
          }, delay);
        },
      };
    },

    // 开始播放
    play() {
      const events = this.sequentialEvent();
      Object.keys(this.sequential).forEach((item) => {
        const ele = this.sequential[item];
        if (events[item]) {
          events[item](() => {});
        }
      });
    },
    // 分割数
    partition() {
      let currentID = '6';
      let num = 15;
      let arr = [];
      for (let i = 0; i < num; i++) {
        arr.push(`storage_animation_${i + 1}`);
      }
      return {
        currentID,
        num,
        arr,
      };
    },
    //加载
    loadingAnimation() {
      // try {
      //   wx.getStorageInfo({
      //     success: (info) => {
      //     },
      //   });
      // } catch (error) {
      // }
	  
	 
			this.mp4_ = this.$IMG_URL +
	      '/uploads/20230505/b7e3a4cdd3addffbb47d40056a5c299f.mp4'
	 
	  
	  return
      try {
        let part = this.partition();
        let base_local = [];
        // 缓存id名
        let storage_animation_name =
          uni.getStorageSync('storage_animation_name') || '';
        // 拼接
        let len = part.arr.length;
        for (let i = 0; i < len; i++) {
          const item = part.arr[i];
          base_local.push(uni.getStorageSync(item));
        }

        // 检测 是否缺分段
        let check = base_local.every((item) => {
          return item;
        });

        if (check && storage_animation_name == part.currentID) {
          console.log('已缓存');
          // 转字符串
          let base_ = base_local.join('');
          //转本地路径
		  
		  console.log(111,base_)
		  
          tools.base64src(base_, (res) => {
			  console.log(res)
            this.mp4_ = res;
			
          });
		  
        } else {
          console.log('正在缓存');
          // 清除 缓存
          this.clearLocalLoading(part.arr);
          // 下载视频
          this.download(
            this.$IMG_URL +
              '/uploads/20230505/b7e3a4cdd3addffbb47d40056a5c299f.mp4'
          ).then((res) => {
            // 转64位
            let base = uni.arrayBufferToBase64(res.data);
            try {
              // 切割数
              let spilt_num = Math.ceil(base.length / part.num);
              //末位
              let last = 0;
              // 切割
              for (let i = 0; i < part.num; i++) {
                let str = '';

                if (spilt_num * i >= base.length) {
                  last = base.length;
                } else {
                  last = spilt_num * i + spilt_num;
                }
                str = base.slice(spilt_num * i, last);
                uni.setStorageSync(part.arr[i], str);
              }
              // id记录
              uni.setStorageSync('storage_animation_name', part.currentID);
            } catch (error) {
              console.log(error);
            }

            // 转本地路径
            tools.base64src(base, (res) => {
              this.mp4_ = res;
            });
          });
        }
      } catch (error) {
        console.log('loadingLocal', error);
      }
    },
    //清除缓存
    clearLocalLoading(data) {
      for (let i = 0; i < data.length; i++) {
        try {
          uni.removeStorageSync(data[i]);
        } catch (e) {
          // error
        }
      }
    },
    // 下载资源
    download(url) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: url,
          responseType: 'arraybuffer',
          success: (res) => {
            resolve(res);
          },
          fail: () => {
            reject();
          },
        });
      });
    },
    // ArrayBuffer 转 Uint8Array
    mergeArrayBuffer(arrays) {
      let totalLen = 0;
      for (let arr of arrays) {
        totalLen += arr.byteLength;
      }
      let res = new Uint8Array(totalLen);
      let offset = 0;
      for (let earr of arrays) {
        for (let arr of [earr]) {
          let uint8Arr = new Uint8Array(arr);
          res.set(uint8Arr, offset);
          offset += arr.byteLength;
        }
      }
      return res.buffer;
    },
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}

.lottery-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  --againdisplay: none;
  .animation-summon.light.hide,
  .animation-summon.open.hide {
    animation: fade-hide 0.6s ease-out 0s 1 normal forwards;
  }
  .animation-summon.open.show,
  .animation-summon.light.show {
    animation: fade-show 1.5s ease-in 0s 1 normal forwards;
  }
  .animation-summon.light {
    z-index: 4;
  }
  .animation-summon.light,
  .animation-summon.open {
    opacity: 0;
  }
  .animation-summon {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .gif-show {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
    .starry-sky,
    .particle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
  }

  .result-end {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    animation: show_again 0.6s linear 4.5s 1 normal forwards;

    .swiper-group {
      width: 100%;
      height: 100%;
      .swiper-item {
        width: 100%;
        height: 100%;
      }
    }

    .indicator {
      position: absolute;
      bottom: 80rpx;
      left: 0;
      text-align: left;
	  margin-left:15px;
      width: 100%;
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      opacity: 0;
      animation: fade 1.5s ease-in 1.5s 1 normal forwards;
    }
  }
  .bottom-btn {
    position: absolute;
    left: 0;
    bottom: 60rpx;

    z-index: 10;
    padding: 0 60rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .skip-btn {
      position: absolute;
      right: 30rpx;
      top: 50%;
      padding: 2rpx;
      line-height: 28rpx;
      transform: translateY(-50%);
      color: #fff;
      font-size: 28rpx;
      border-bottom: 2rpx solid #fff;
      .icon-skip {
        margin-right: 2rpx;
      }
    }
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    opacity: 0.8;
    overflow: hidden;
  }
  .video-view {
    position: absolute;
    top: 0;
    left: calc(50% - 60vw);
    z-index: 0;
    width: 120vw;
    height: 100vh;
  }

  .card-list {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    position: relative;
    padding: 150rpx 40rpx 100rpx;
    width: 100%;
    height: 100%;
    perspective: 150vw;
    perspective-origin: 0% 0% 0%;
    &.single {
      transform: scale(1.4);
    }

    .card-item:nth-child(9),
    .card-item:nth-child(4) {
      margin-left: 60rpx;
    }
    .card-item:nth-child(10),
    .card-item:nth-child(5) {
      margin-right: 60rpx;
    }
    .card-item:nth-child(3) {
      margin-right: 0;
    }
    .card-item:nth-child(8) {
      margin-right: 0;
    }
  }
}
.again-btn {
  position: relative;
  width: 188rpx;
  height: 88rpx;
  margin-left:10rpx;
  margin-right:10rpx;

  .bg-again {
    position: absolute;
    top: -3rpx;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 32rpx;
    font-weight: 800;
    color: #ffffff;
  }
}
.card-item.skip {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.card-item {
  margin-bottom: 30rpx;
  margin-right: 20rpx;
  transform: translate3d(-1100px, 1100px, 1px);
  opacity: 0;
  --timing: 1.3s;
  --delaytiming: 0.4s;
  --min-scale: 0.04;
  --depth: 1200px;

  --a: calc(var(--delaytiming) * 0.4);
  --b: var(--delaytiming);
  --c: 0.05s;
}
/* 动画  1*/
.card-item.show:nth-child(1) {
  animation: slide-in-bc-1 var(--timing) ease-in 0s 1 normal forwards;
}
/* 动画  2*/
.card-item.show:nth-child(2) {
  animation: slide-in-bc-2 var(--timing) ease-in
    calc(1 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}
/* 动画  3*/
.card-item.show:nth-child(3) {
  animation: slide-in-bc-3 var(--timing) ease-in
    calc(2 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}

/* 动画  4*/
.card-item.show:nth-child(4) {
  animation: slide-in-bc-4 var(--timing) ease-in
    calc(3 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}
/* 动画  5*/
.card-item.show:nth-child(5) {
  animation: slide-in-bc-5 var(--timing) ease-in
    calc(4 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}
.card-item.show:nth-child(6) {
  animation: slide-in-bc-6 var(--timing) ease-in
    calc(5 * var(--a) + var(--b) + var(--c)) normal forwards;
}
.card-item.show:nth-child(7) {
  animation: slide-in-bc-7 var(--timing) ease-in
    calc(6 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}
.card-item.show:nth-child(8) {
  animation: slide-in-bc-8 var(--timing) ease-in
    calc(7 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}
.card-item.show:nth-child(9) {
  animation: slide-in-bc-9 var(--timing) ease-in
    calc(8 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}
.card-item.show:nth-child(10) {
  animation: slide-in-bc-10 var(--timing) ease-in
    calc(9 * var(--a) + var(--b) + var(--c)) 1 normal forwards;
}

@keyframes slide-in-bc-1 {
  0% {
    transform: translate3d(224rpx, var(--depth), 1px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-2 {
  0% {
    transform: translate3d(0, var(--depth), 2px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-3 {
  0% {
    transform: translate3d(-224rpx, var(--depth), 3px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-4 {
  0% {
    transform: translate3d(108rpx, var(--depth), 4px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-5 {
  0% {
    transform: translate3d(-108rpx, var(--depth), 5px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes slide-in-bc-6 {
  0% {
    transform: translate3d(224rpx, var(--depth), 1px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-7 {
  0% {
    transform: translate3d(0, var(--depth), 3px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-8 {
  0% {
    transform: translate3d(-224rpx, var(--depth), 3px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-9 {
  0% {
    transform: translate3d(108rpx, var(--depth), 3px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bc-10 {
  0% {
    transform: translate3d(-108rpx, var(--depth), 3px) scale(var(--min-scale))
      rotateY(-1080deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes show_again {
  0% {
    --againdisplay: none;
  }
  100% {
    --againdisplay: inline-block;
  }
}

@keyframes move-light {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes fade-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes fade-hide {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>
